<template>
  <!--商品添加基本信息  -->
  <div id="baseShop">
    <w-panel-wrap>
      <w-panel-title :title="'E店导入'"></w-panel-title>
      <w-panel>
        <w-form-validate @on-validate="onValidate">
        <div class="item">
            <div class="item-group">
              <span class="label box label-h lable-lef">导入说明:<span class="enter-right">请在E店宝查询以下信息，按照需求填写</span></span>
            </div>
          </div>
          <div class="item">
            <div class="item-group">
              <span class="label box label-h">商品分类:</span>
              <div class="box">
                <div style="width:208px;display:inline-block;">
                  <w-select v-model="firstClass" :options="firstClassList" @on-select="getGoodsClassInfo(firstClass, 1)"></w-select>
                </div>
                <div style="width:208px;display:inline-block;" >
                  <w-select v-model="secondClass" :options="secondClassList" @on-select="getGoodsClassInfo(secondClass, 2)"></w-select>
                </div>
                <div style="width:208px;display:inline-block;">
                  <w-select v-model="thirdClass" :options="thirdClassList"></w-select>
                </div>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="item-group">
              <span class="label box label-h">商品货号:</span>
              <div class="box box-w">
                <div class="box">
                  <w-input v-model="sortNo" :validate="true" rule="isEmpty" error="商品货号不能为空"></w-input>
                </div>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="item-group">
              <span class="label box label-h">申请appkey:</span>
              <div class="box box-w large-input">
                <w-input v-model="storeEdbInfo.appkey" :validate="false" rule="isEmpty" error="发货量不能为空"></w-input>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="item-group">
              <span class="label box label-h">申请secret:</span>
              <div class="box box-w large-input">
                <w-input v-model="storeEdbInfo.appscret" :validate="false" rule="isEmpty" error="发货量不能为空"></w-input>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="item-group">
              <span class="label box label-h">申请token:</span>
              <div class="box">
                <w-input v-model="storeEdbInfo.token" :validate="false" rule="isEmpty" error="发货量不能为空"></w-input>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="item-group">
              <span class="label box label-h">主账号:</span>
              <div class="box">
                <w-input v-model="storeEdbInfo.dbhost" :validate="false" rule="isEmpty" error="发货量不能为空"></w-input>
              </div>
            </div>
          </div>
          <div class="item" style="border:0;">
            <div class="item-group">
              <span class="label box label-h"></span>
              <div class="box">
                <button class="btn main">导入E店宝数据</button>
              </div>
            </div>
          </div>
        </w-form-validate>
      </w-panel>
    </w-panel-wrap>
  </div>
</template>
<script>
// 获取接口对象
import { apiGoods, apiGetStoreEdbInfo, apiEdbImport } from '../../common/api'
import app from '../../main'

export default {
  data() {
    return {
      firstClassList: [],
      secondClassList: [],
      thirdClassList: [],
      secondClass: '',
      firstClass: '',
      thirdClass: '',
      sortNo: '',
      gcId: '',
      storeEdbInfo: {
        appkey: '',
        appscret: '',
        token: '',
        dbhost: ''
      }
    }
  },
  created() {
    this.getGoodsClassInfo({}, 0)
    this.getStoreEdbInfo()
  },
  methods: {
    // 商品分类
    getGoodsClassInfo(gcId, level) {
      let cId
      if (level != 0) {
        cId = {gcId: gcId}
      } else {
        cId = gcId
      }
      apiGoods.getGoodsClassInfo(cId).then((resp) => {
        if (resp == undefined || resp == 'undefined' || resp.goodsClassList == 0) {
          return
        }
        if (level == 0) {
           resp.goodsClassList.forEach((item) => {
            this.firstClassList.push({
              value: item.goodsClassId,
              label: item.className
            })
          })
        } else if (level == 1) {
          this.secondClassList = []
          this.secondClass = ''
          resp.goodsClassList.forEach((item) => {
            this.secondClassList.push({
              value: item.goodsClassId,
              label: item.className
            })
          })
        } else {
          this.thirdClassList = []
          this.thirdClass = ''
          resp.goodsClassList.forEach((item) => {
            this.thirdClassList.push({
              value: item.goodsClassId,
              label: item.className
            })
          })
        }
      })
    },
    // 获取商家E电宝秘钥信息,根据商家ID
    getStoreEdbInfo() {
      const _this = this
      const storeId = _this.$store.getters.storeId
      apiGetStoreEdbInfo(storeId).then((resp) => {
        if (resp.storeEdbInfo) {
          this.storeEdbInfo.appkey = resp.storeEdbInfo.appkey
          this.storeEdbInfo.appscret = resp.storeEdbInfo.appscret
          this.storeEdbInfo.token = resp.storeEdbInfo.token
          this.storeEdbInfo.dbhost = resp.storeEdbInfo.dbhost
        }
      })
    },
     // E电宝导入
    edbImport() {
      this.$store.commit('clearAddGoodsInfo')
      if (!this.storeEdbInfo.appkey || !this.storeEdbInfo.appscret || !this.storeEdbInfo.dbhost || !this.storeEdbInfo.token) {
        app.$toast('请填写商铺信息')
        return
      }
      let params = {
        gcId: this.thirdClass,
        storeId: this.$store.getters.storeId,
        sortNo: this.sortNo,
        storeEdbInfo: this.storeEdbInfo
      }
      if (!this.thirdClass) {
        app.$toast('商品分类为必选')
        return
      }
      apiEdbImport(params).then((resp) => {
        let _this = this
        app.$toast('导入成功')
        this.$store.commit('clearAddGoodsInfo')
        setTimeout(() => {
          _this.$router.push('/goods/store')
        }, 1000)
      })
    },
    onValidate() {
      this.edbImport()
    }
  }
}
</script>
<style lang="scss">
#baseShop {
  .item {
    padding: 20px 0 20px 144px;
    border-bottom: 1px dashed #47BDF4;
    font-size: 12px;
    width: 100%;
    .item-group {
      .label {
        min-width: 99px;
        text-align: right;
        color: #999;
        vertical-align: top;
      }
      .enter-right {
        color: #f00384;
        padding-left: 5px;
      }
      .lable-lef {
        padding-left: 50px;
      }
      .label-h {
        line-height: 30px;
        height: 30px;
      }
      .box {
        display: inline-block;
        position: relative;
      }
      .box-w {
        min-width: 500px;
      }
      .item-c {
        color: #666;
      }
      .tip {
        margin-top: 15px;
      }
    }
    .label-c {
      color: #999;
    }
    .btn {
      width: 150px;
    }
  }
  .large-input {
    .form-control {
      width: 200px;
    }
  }
  .goods-price {
    padding-bottom: 10px;

    .w-input {
      width: 80px;
      display: inline-block;
    }
  }
}
</style>